<!DOCTYPE html>
<html>
    <head>
    <title>localStorage</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script language="javascript" src="js/bwH5LS.js"></script>
    <script language="javascript">
        var t = new bwTable();
        var db = getLocalStorage() || dispError('Local Storage not supported.');

        function dispResults() {
            if(errorMessage) {
                element('results').innerHTML = errorMessage;
                return;
            }
            
            var t = new bwTable();
            t.addRow( ['traveler', db.getItem('traveler')] );
            t.addRow( ['destination', db.getItem('destination')] );
            t.addRow( ['transportation', db.getItem('transportation')] );
            element('results').innerHTML = t.getTableHTML();
        }

        function dbGo() {
            if(errorMessage) return;
            var f = element('travelForm');
            db.setItem('traveler', f.elements['traveler'].value);
            db.setItem('destination', f.elements['destination'].value);
            db.setItem('transportation', f.elements['transportation'].value);
            dispResults();
        }

        function dbClear() {
            if(errorMessage) return;
            db.clear();
            dispResults();
        }
        
        function initDisp() {
            dispResults();
        }

        window.onload = function() {
            initDisp();
        }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>

    <body>
    <div id="content">
        <h1> localStorage </h1>
        <div id="form">
            <form id="travelForm">
                <table class="form">
                    <tr>
                        <td class="label"> Traveler </td>
                        <td><input type="text" name="traveler" /></td>
                    </tr>
                    <tr>
                        <td class="label"> Destination </td>
                        <td><input type="text" name="destination" /></td>
                    </tr>
                    <tr>
                        <td class="label"> Transportation </td>
                        <td><input type="text" name="transportation" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" class="button"><input id="formSubmit" type="button" value="Clear" onClick="javascript:dbClear()" />
                            <input id="formSubmit" type="button" value="Go" onClick="javascript:dbGo()" /></td>
                    </tr>
                </table>
                <input id="inputAction" type="hidden" name="action" value="add" />
                <input id="inputKey" type="hidden" name="key" value="0" />
            </form>
        </div>
        <div id="results"> </div>
    </div>
</body>
</html>  
